<template>
  <div>
    <div style="margin-bottom: 20px;" v-show="false">
      <el-button
          size="small"
          @click="addTab(editableTabsValue)">
        add tab
      </el-button>
    </div>
    <el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab" @tab-click="toLink">
      <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name">
        <router-view></router-view>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: 'Test2',
  data() {
    return {
      editableTabsValue: '2',
      editableTabs: [{
        title: 'me',
        name: 'me',
        content: 'Tab 1 content'
      }, {
        title: 'eq',
        name: 'eq',
        content: 'Tab 2 content'
      }],
      tabIndex: 2
    }
  },
  methods: {
    toLink(value){
      console.log(value)
      console.log(value._props.label)
      if (value._props.label === 'me'){
        this.$router.push('/oos/test2/me');
      }
      if (value._props.label === 'eq'){
        this.$router.push('/oos/test2/eq');
      }

    },

    addTab(targetName) {
      let newTabName = ++this.tabIndex + '';
      this.editableTabs.push({
        title: 'New Tab',
        name: newTabName,
        content: 'New Tab content'
      });
      this.editableTabsValue = newTabName;
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    }
  }
}
</script>